<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="beans.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="css/modify.css">
</head>
<body>

	<div id="all">
		<div id="header">
			<h3 >修改个人信息页面  </h3>
		</div>
		
		<div id="content">
			<form name="form1" action="" method="post" enctype="multipart/form-data">
			<table>
				<tr>
					<td>用户号：</td>
					<td><input name="userno" type="text" value="${user.userno }"  readonly="readonly"></td>
					<td>以字母开头，不少于5位</td>
				</tr>
				<tr>
					<td>用户密码：</td>
					<td><input name="userpwd" type="password" value="${user.userpwd }" ></td>
					<td>不少于6位</td>
				</tr>
				<tr>
					<td>再输密码：</td>
					<td><input name="userpwdagain" type="password" value="${user.userpwd }" ></td>
					<td>不少于6位</td>
				</tr>
				<tr>
					<td>姓名：</td>
					<td><input name="username" type="text" value="${user.username }" ></td>
			
				</tr>
				
				<tr>
					<td>性别：</td>
					<td>
					
						<input name="usersex" type="radio" <c:if test="${user.usersex=='男' }">checked</c:if> value="男">男
						<input name="usersex" type="radio" <c:if test="${user.usersex=='女' }">checked</c:if> value="女">女
					</td>			
				</tr>
				
				<tr>
					<td>年龄：</td>
					<td>
						<input name="userage" type="text" value="${user.userage }" >
					</td>			
				</tr>
				
				<tr>
					<td>家庭住址：</td>
					<td>
						<input name="useraddress" type="text" value="${user.useraddress }" >					
					</td>			
				</tr>
				
				<tr>
					<td>职业：</td>
					<td colspan="2">
						<select name="userprofession" >						
						<option value="教师" <c:if test="${user.userprofession=='教师'}"> selected </c:if > >教师 
						</option>
						<option value="学生" <c:if test="${user.userprofession=='学生'}">selected</c:if>>学生
						</option>
						</select>					
					</td>
				</tr>
				<tr>
					<td>兴趣：</td>
					<td colspan="2">
						<input name="userinterest" type="checkbox" value="足球" <c:if test="${fn:contains(user.userinterest,'足球') }">checked</c:if> >足球
						<input name="userinterest" type="checkbox" value="篮球" <c:if test="${fn:contains(user.userinterest,'篮球') }">checked</c:if> >篮球	
						<input name="userinterest" type="checkbox" value="电影" <c:if test="${fn:contains(user.userinterest,'电影') }">checked</c:if> >电影	
						<input name="userinterest" type="checkbox" value="小说" <c:if test="${fn:contains(user.userinterest,'小说') }">checked</c:if> >小说					
					</td>
				</tr>
				
				<tr>
					<td>邮箱：</td>
					<td colspan="2">
						<input name="useremail" type="text" value="${user.useremail }" >
					</td>			
				</tr>
				
				<tr>
					<td>照片：</td>
					<td colspan="2">						
						<input name="userphoto" id="userphoto" type="file" value="${user.userphoto }" onchange="uploadpic2();" >
						<input type="button" value="上传照片" onclick="uploadpic();">
					</td>			
				</tr>
				
				<tr>
					<td>简介：</td>
					<td colspan="2">
						<textarea name="usersummary" id="usersummary" rows="6" cols="30">${user.usersummary } </textarea>
					
					</td>
				</tr>
				
			</table>
			</form>
		</div>
		<div id="third">		
			<a href="main.jsp" onclick="tj1();return false;">提交</a><!-- tj1()如果错，return false失效 -->	
			<a href="main.jsp" onclick="tjajax();return false;">ajax提交</a>				
		</div>
		
	</div>
	

	<script type="text/javascript">
	
	function uploadpic(){
		document.getElementById("userphoto").click();
	}
	
	function uploadpic2(){
		//本来是一选择图片就在这里使用ajax上传，现在统一到ajaxtj()里进行处理,但有可能有点问题（图片的更新问题）
	}
	
	
	function tj1(){//此方法，其实仅仅是得到表单中的数据
		//如果不能运行，原因在于：html中的name写错，里面代码写错等。错一点，js函数执行不下去。可在控制台下查错			
		
		var userno,userpwd,userpwdagain,username,usersex,useraddress,userprofession,userinterest,useremail,userphoto,usersummary;

		userno=form1.userno.value;		
		userpwd=form1.userpwd.value;		
		userpwdagain=form1.userpwdagain.value;
		username=form1.username.value;
		//alert("username is:"+username+"length is:"+username.length);//验证如果不输入的话，长度为0
		
	
		
		usersexarray=form1.usersex;
		for(var i=0;i<usersexarray.length;i++){
			if(usersexarray[i].checked){
				usersex=usersexarray[i].value;
			}				
		}
	
		userage=form1.userage.value;
		useraddress=form1.useraddress.value;
		userprofession=form1.userprofession.value;
		
		
		userinterest="";//设置一个初值，否则变量开始默认值undefined
		userinterestarray=form1.userinterest;
		for(var i=0;i<userinterestarray.length;i++){
			if(userinterestarray[i].checked){
				userinterest=userinterest+userinterestarray[i].value;
			}				
		}
				
		useremail=form1.useremail.value;
		userphoto=form1.userphoto.value;		
		usersummary=form1.usersummary.value;
		
		alert(userno+userpwd+userpwdagain+username+usersex+useraddress+userprofession+userinterest+useremail+userphoto+usersummary);		
		//检测数据
		check(userno,userpwd,userpwdagain,username,usersex,useraddress,userprofession,userinterest,useremail,userphoto,usersummary);
		
	}
	
	////下面方法，其实仅仅是驿表单中的数据进行检测
	function check(userno,userpwd,userpwdagain,username,usersex,useraddress,userprofession,userinterest,useremail,userphoto,usersummary){		
		//定义检测用户编号的规则，不少于5位，最多10位，首位是字母
		var rule=/^[a-zA-Z]{1}\w{4,9}$/;
		if(!rule.test(userno)) alert("编号不符合要求");
		else if(userpwd!=userpwdagain) alert("密码不一致");
		else if(username.length<=0) alert("没有输入姓名");		
		else{
			//window.location.href="main.jsp";
			form1.action="UserServlet?id=6";
			form1.submit();			
		}		
	}
	
	function tjajax(){	
		alert("进入ajaxtj");
		var params=getdata();//注意，取数据的时候，照片不要加进来，因为下面的"userphoto").files[0];才是取照片
		alert("params is:"+params);
		if(params=="") return;
		params=encodeURI(params);
		
		var xmlHttpRequest = new XMLHttpRequest();
		//var params="userno="+form1.userno.value+"&userpwd="+form1.userpwd.value;
		
		var fileObj = document.getElementById("userphoto").files[0];
		var form = new FormData();
		form.append("userphoto", fileObj);		
		
		xmlHttpRequest.open("post", "UserServlet?id=66&" + params, "true");
		//xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlHttpRequest.send(form);
		
		xmlHttpRequest.onreadystatechange = function() {
			if (xmlHttpRequest.readyState == 4) {
				if (xmlHttpRequest.status == 200) {
					//info.innerHTML = xmlHttpRequest.responseText;
					alert("提交成功");
					var obj=parent.document.getElementById("person");
					obj.setAttribute('src', 'upload/'+'${user.userphoto}'+'?t=' + Math.random()); //显示图片
				} else {
					alert('您请求的页面发现错误！');
				}
			}
		}
	}
	

	function getdata(){//得到所有参数，并组织好

		var userno,userpwd,userpwdagain,username,usersex,useraddress,userprofession,userinterest,useremail,userphoto,usersummary;

		userno=form1.userno.value;		
		userpwd=form1.userpwd.value;		
		userpwdagain=form1.userpwdagain.value;
		username=form1.username.value;
	
		
		usersexarray=form1.usersex;
		for(var i=0;i<usersexarray.length;i++){
			if(usersexarray[i].checked){
				usersex=usersexarray[i].value;
			}				
		}
	
		userage=form1.userage.value;
		useraddress=form1.useraddress.value;
		userprofession=form1.userprofession.value;		
		

		
		userinterest="";//设置一个初值，否则变量开始默认值undefined
		userinterestarray=form1.userinterest;
		for(var i=0;i<userinterestarray.length;i++){
			if(userinterestarray[i].checked){
				userinterest=userinterest+userinterestarray[i].value+"-";
			}				
		}
		userinterest=userinterest.substring(0,userinterest.length-1);
				
		useremail=form1.useremail.value;
		userphoto=form1.userphoto.value;		
		usersummary=form1.usersummary.value;
		
		alert(userno+userpwd+userpwdagain+username+usersex+useraddress+userprofession+userinterest+useremail+userphoto+usersummary);		
		//检测数据合法性，使用check2
		var flag=check2(userno,userpwd,userpwdagain,username,usersex,useraddress,userprofession,userinterest,useremail,userphoto,usersummary);
		var params="";
		if(flag==true){
			params=params+"userno="+userno+"&";
			params=params+"userpwd="+userpwd+"&";
			params=params+"username="+username+"&";
			params=params+"usersex="+usersex+"&";
			params=params+"userage="+userage+"&";
			params=params+"useraddress="+useraddress+"&";
			params=params+"userprofession="+userprofession+"&";
			params=params+"userinterest="+userinterest+"&";
			params=params+"useremail="+useremail+"&";
			//params=params+"userphoto="+userphoto+"&";
			params=params+"usersummary="+usersummary;			
		}
		return params;
	}
	
	function check2(userno,userpwd,userpwdagain,username,usersex,useraddress,userprofession,userinterest,useremail,userphoto,usersummary){		
		//定义检测用户编号的规则，不少于5位，最多10位，首位是字母
		var flag=false;
		var rule=/^[a-zA-Z]{1}\w{4,9}$/;
		if(!rule.test(userno)) alert("编号不符合要求");
		else if(userpwd!=userpwdagain) alert("密码不一致");
		else if(username.length<=0) alert("没有输入姓名");		
		else{
			//window.location.href="main.jsp";
			flag=true;		
		}
		return flag;
	}
	</script>
	
	<script type="text/javascript">
			
			//加下面这些语句的作用是，当在iiframe中修改自身信息-更新图片的时候，要在左上角（不在iiframe中）动态更新图片
			
			//父窗口文字的更新很简单，如：parent.document.getElementById("test").innerHTML=form1.userno.value+"您好!";
			
			//方法1，重新上传图片，但不能及时更新
			//parent.document.getElementById("person").setAttribute("src","upload/${user.userphoto}");
			
			//方法2,也不能及时更新
// 			var obj=parent.document.getElementById("imgdiv");
// 			var img="";
// 			img=img+"<img id='person'  style='max-width: 90px;max-height: 90px'";
// 			img=img+" src='upload/";
// 			img=img+"${user.userphoto}";
// 			img=img+"?t=" + Math.random());//这里加随机数不可以，反正要加一个随机数		
// 			img=img+"' >";
// 			imgdiv.innerHTML=img;

			//方法三，问题解决，完美更新图片，加了一个随机数作为参数，就可以不用缓冲图片
			var obj=parent.document.getElementById("person");
			obj.setAttribute('src', 'upload/'+'${user.userphoto}'+'?t=' + Math.random()); //显示图片
	</script>
	


</body>
</html>